<!DOCTYPE html>  
<html>  
<head>  
<title>canvas</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>  
<body>

<script language="javascript" type="text/javascript">
//<p><canvas id="mycanvas" width="800" height="600"></canvas></p>	
function fillRect_time(context,x,y){
	var old= new Date();
	for(var i=0;i<800/x;i++){
		for(var j=0;j<600/y;j++){
			context.fillRect(i*x,j*y,x,y);
		}
	}
	var now= new Date();
	return (now-old);
}
function strokeRect_time(context,x,y){
	var old= new Date();
	for(var i=0;i<800/x;i++){
		for(var j=0;j<600/y;j++){
			context.strokeRect(i*x,j*y,x,y);
		}
	}
	var now= new Date();
	return (now-old);
}
function clearRect_time(context,x,y){
	var old= new Date();
	for(var i=0;i<800/x;i++){
		for(var j=0;j<600/y;j++){
			context.clearRect(i*x,j*y,x,y);
		}
	}
	var now= new Date();
	return (now-old);
}
var img=document.createElement("img");
	img.onload=begin_test;
	img.src ="cats.jpg";
	
function begin_test(){
	var mcanvas = document.createElement("canvas");
	mcanvas.width=800;
	mcanvas.height=600;
	document.body.appendChild(mcanvas);
	document.write("<br>");
	var context = mcanvas.getContext('2d');
	context.fillStyle = "rgba(150,150,150,1)";
	context.strokeStyle = "rgba(255,150,150,1)";
	/////////////////////////
	
	var average=0;
	//for(var i=0;i<10;i++){
		average+=fillRect_time(context,4,4);
		//context.clearRect(0,0,800,600);
	//}
	//average=average/10;
	document.write("fillRect: "+average+ " ms<br>");
	//////////////////////
	var average=0;
	//for(var i=0;i<10;i++){
		average+=strokeRect_time(context,4,4);
		context.clearRect(0,0,800,600);
	//}
	//average=average/10;
	document.write("strokeRect: "+average+ " ms<br>");
	//////////////////////
	average=0;
	//context.fillRect(0,0,800,600);
	//for(var i=0;i<10;i++){
		var value=clearRect_time(context,4,4);
		average+=value;
	//}
	//average=average/10;
	document.write("clearRect: "+average+ " ms<br>");
	
	//////////////////
	/*这个意义不大
	context.save();
	context.translate(400,300);
	var old= new Date();
	for(var i=0;i<100000;i++){
		context.rotate(Math.PI*2/i);
	}
	var now= new Date();
	document.write("rotate:"+(now-old)+"ms<br> ")
	context.restore();
	*////////////////////////////////////////
	
	//var img=new Image();
	//img.src ="cats.jpg";
		//img.onload = function(){
		var old= new Date();
		//for(var i=1;i<10;i++){
			for(var x=0;x<800;x+=4){
				for(var y=0;y<600;y+=4){
					context.drawImage(img,x,y,4,4,x,y,4,4);
				}
			}
			//context.drawImage(img,0,0,800,600);
		//}
		var now= new Date();
		document.write("drawImage_4*4:"+(now-old)+"ms<br>");
	//}
	////////////////
	var old= new Date();
	for(var i=0;i<100;i++)	
		context.drawImage(img,0,0,800,600,0,0,800,600);
	var now= new Date();
	document.write("drawImage_whole:"+(now-old)+"ms<br>");
	context.clearRect(0,0,800,600);
	
	///////////////
	
	var old= new Date();
	for(var i=0;i<500;i=i+10){
		for(var j=0;j<300;j=j+10){
		context.beginPath();
		context.arc(i+50,j+50,50,2*Math.PI,0,true);
		context.closePath();
		context.stroke();
		}
	}
	var now= new Date();
	document.write("arc:"+(now-old)+"ms<br>");
	
	
	var old= new Date();
	context.beginPath();
	context.translate(400,300);
	var r=100;
	context.moveTo(0,2*r);
	for(var i=1;i<227;i++){
		context.quadraticCurveTo(r*Math.sin(Math.PI*(i*110/113+55/113)),r*Math.cos(Math.PI*(i*110/113+55/113)),2*r*Math.sin(2*Math.PI*i*55/113),2*r*Math.cos(2*Math.PI*i*55/113));
	}
	//context.closePath();
	context.stroke();
	var now= new Date();
	document.write("quadraticCurve:"+(now-old)+"ms<br>");
	
	
	//var img=document.createElement("img");
	//var img=new Image();
	//img.src ="cats.jpg";
	context.drawImage(img,0,0,800,600);
	var old= new Date();
	for(var x=0;x<100;x++)
		var imagedata = context.getImageData(100,100,400,300);
	var now= new Date();
	document.write("getImageData:"+(now-old)+"ms<br>");
	////////////////
	context.clearRect(0,0,800,600);
	var old= new Date();
	for(var i=0;i<100;i++)
		context.putImageData(imagedata,0,0);
	var now= new Date();
	document.write("putImageData:"+(now-old)+"ms<br>");
}
</script>  
</body>  
</html>  